<template>
	<div>
		<van-nav-bar :border="false" placeholder fixed title="选择词汇" left-arrow @click-left="onBack"></van-nav-bar>
		<van-tabs v-model:active="active" sticky title-active-color="#0CB76C" title-inactive-color="#000"
			color="#0CB76C" @change="changeTab">
			<van-tab :title="item.periodName" v-for="item in periodList"></van-tab>
		</van-tabs>
		<div class="content">
			<div class="choose">
				<button class="cu-btn round text-xs text-bold-sm"
					:class="currentIndex == index ? 'bg-green' : 'text-black'"
					@click="onChoose(item.versionName, index)" v-for="(item, index) in versionList">
					{{ item.versionName }}
				</button>
			</div>
			<div class="list">
				<div class="list-item" v-for="item in bookList"
					:style="{ backgroundImage: `url(${getBg(item.gradeName)})` }" @click="onItem(item)">
					<div class="list-item-title">{{ item.versionFullName }}</div>
					<div class="list-item-content">
						<span class="text-xs">{{ item.gradeName }}</span>
						<span class="text-xs">{{ item.wordsCount }}个单词</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		nextTick
	} from "vue";
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		request
	} from "@/api/request";
	import dayjs from 'dayjs'
	const active = ref(0);
	const currentIndex = ref(0);
	const versionName = ref('')
	const router = useRouter()
	const route = useRoute()

	onMounted(() => {
		getType();
	});
	const changeTab = () => {
		currentIndex.value = 0
		versionList.value = periodList.value[active.value].child
		versionName.value = versionList.value[0].versionName
		getList();
	};
	const onChoose = (val, index) => {
		versionName.value = val
		currentIndex.value = index;
		getList()
	};

	const bookList = ref([]);
	const periodList = ref([]);
	const versionList = ref([]);
	const wordInfo = ref(null)
	const getData = () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/index`,
			method: 'get'
		}).then(res => {
			wordInfo.value = res.data;
		})
	};

	const getType = () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/getBookCategory`,
			method: 'get'
		}).then(res => {
			periodList.value = res.data.periodList;
			versionList.value = periodList.value[0].child
			if (versionList.value.length == 0) {
				versionName.value = ""
			} else {
				versionName.value = versionList.value[0].versionName
			}
			getList();
		})
	};

	const getList = () => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/bookList`,
			method: 'get'
		}, {
			query: {
				periodName: periodList.value[active.value].periodName,
				versionName: versionName.value
			}
		}).then(res => {
			let bookListArr = []
			res.data.map(item => {
				bookListArr.push(item.list)
			})
			bookList.value = bookListArr.flat()
		})
	};

	const getBg = (str) => {
		if (
			(str && str.charAt(0) == "七") ||
			str.charAt(0) == "一" ||
			str.charAt(0) == "四"
		) {
			return new URL("@/assets/word/7.png", import.meta.url).href;
		} else if (
			(str && str.charAt(0) == "八") ||
			str.charAt(0) == "二" ||
			str.charAt(0) == "五"
		) {
			return new URL("@/assets/word/8.png", import.meta.url).href;
		} else {
			return new URL("@/assets/word/9.png", import.meta.url).href;
		}
	}
	const submit = (count, end_day) => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/updatePlan`,
			method: 'post'
		}, {
			data: {
				date: dayjs().add(parseInt(end_day), 'day').format('YYYY-MM-DD'),
				count: count,
				end_day: end_day
			}
		}).then(res => {
			router.go(-1);
		})
	}

	const getSetting = (versionId) => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/getSetting`,
			method: 'get'
		}, {
			query: {
				version_id: versionId,
			}
		}).then(res => {
			submit(res.data.count[0], res.data.days[0])
		})
	}

	const onItem = (item) => {
		request({
			url: `https://d-xueer.bigchun.com/api/reciting/updatePlan`,
			method: 'post'
		}, {
			data: {
				version_id: item.versionId
			}
		}).then(res => {
			getSetting(item.versionId)
		})
	}

	const onBack = () => {
		if (wordInfo.value.isset) {
			router.go(-1);
		} else {
			var u = navigator.userAgent;
			var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
			var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
			if (isAndroid) {
				window.android.goBack();
			} else if (isiOS) {
				window.webkit.messageHandlers.back.postMessage("")
			}
		}
	}
	onMounted(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	@import './style/icon.scss';
	@import './style/index.scss';
	@import './style/main.scss';

	:deep(.van-nav-bar) {
		color: #000;
		background: #fff;
	}

	:deep(.van-icon-arrow-left) {
		color: #000 !important;
		font-size: 20px;
	}

	:deep(.van-nav-bar__title) {
		font-size: 18px;
		font-weight: 500;
		color: #000;
	}

	:deep(.van-tabs__wrap) {
		border-bottom: 1px solid #e5e5e5;
	}

	.content {
		height: calc(100vh - 90px);
		overflow: auto;
	}

	.choose {
		display: grid;
		gap: 10px;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		padding: 20px 20px 10px 20px;
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		// grid-template-rows: 124px;
		padding: 0 15px;
		gap: 10px;

		&-item {
			// background: url(@/assets/word/7.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			color: #fff;
			padding: 15px 0;
			display: flex;
			flex-direction: column;
			height: 144px;
			// align-items: center;
			justify-content: space-between;

			&-title {
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 16px;
				padding: 0 15px;
			}

			&-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20px 0 10px;

				span:last-child {
					margin-top: 6px;
				}
			}
		}
	}
</style>